<style>
    .answer-container {
        display: none;
        margin-left: 20px;
    }

    .answer-item {
        display: inline-block;
        margin-right: 20px;
        vertical-align: top;
    }

    .answer-label {
        width: 30px;
        margin-right: 5px;
        text-align: center;
    }
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<div class="breadcrumbs" id="breadcrumbs">
    <ul class="breadcrumb">
        <li>
            <i class="home-icon fa fa-home"></i>
            <a href="#">投票</a>
        </li>
        <li>
            <a href="#">投票管理</a>
        </li>
        <li class="active">投票列表</li>
    </ul>
</div>
<div class="content">
    <form name='admin_list' method='post' action='{url:/vote/vote_delete}'>
        <table class="table list-table">
            <colgroup>
                <col width="10px"/>
                <col width="150px"/>
                <col width="100px"/>
                <col width="200px"/>
                <col/>
            </colgroup>
            <caption>
                <a class="btn btn-default" href="{url:/vote/question_add/vote_id/$this->voteId}">
                    <i class="fa fa-plus"></i> 添加题目
                </a>
                <a class="btn btn-default" onclick="selectAll('id[]');">
                    <i class="fa fa-check"></i>全选
                </a>
                <a class="btn btn-default" onclick="delModel({msg:'是否把投票信息放到回收站内？'});">
                    <i class="fa fa-close"></i>批量删除
                </a>
                <a class="btn btn-default" href='#'>
                    <i class="fa fa-trash"></i>回收站
                </a>
            </caption>
            <thead>
            <tr>
                <th></th>
                <th style="width: 50px">ID</th>
                <th style="width: 250px">题目</th>
                <th>类型</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            {foreach:items=$this->questionData}
            <tr>
                <td>
                    <a href="javascript:void(0);" class="toggle-answer" data-question-id="{$item['question_id']}" title="点击显示选项">
                        <i class="fa fa-plus"></i>
                    </a>
                </td>
                <td>{$item['question_id']}</td>
                <td>{$item['question_text']}</td>
                <td>
                    {if:$item['question_type'] == 1}
                    单选
                    {elseif:$item['question_type'] == 2}
                    多选
                    {/if}
                </td>
                <td>
                    {if:$item['vote_status'] == 0}
                    未开始
                    {elseif:$item['vote_status'] == 1}
                    进行中
                    {elseif:$item['vote_status'] == 2}
                    已结束
                    {/if}
                </td>
                <td>
                    <a href='{url:/vote/question/id/$item[' question_id']}' title="题目管理"><i
                        class='operator fa fa-list-alt'></i></a>
                    <a href='{url:/vote/vote_edit/id/$item[' question_id']}'><i
                        class='operator fa fa-edit'></i></a>
                    <a href="javascript:void(0);"
                       onclick="delModel({link:'{url:/vote/vote_delete/id/$item['question_id']}',msg:'是否把投票信息删除？'});"><i
                            class='operator fa fa-close'></i></a>
                </td>
            </tr>
            <tr class="answer-container" id="answer-container-{$item['question_id']}">
                <td colspan="6">
                    <div class="answer-content">
                        <!-- 这里将通过 AJAX 填充答案 -->
                    </div>
                </td>
            </tr>
            {/foreach}
            </tbody>
        </table>
    </form>
</div>
{if:$this->questionObj}
{$this->questionObj->getPageBar()}
{/if}
<script>
    $(document).ready(function () {
        $('.toggle-answer').on('click', function () {
            const questionId = $(this).data('question-id');
            const answerContainer = $('#answer-container-' + questionId);
            const answerContent = answerContainer.find('.answer-content');

            if (answerContainer.is(':hidden')) {
                // 如果答案区域隐藏，则发送 AJAX 请求获取答案
                $.ajax({
                    url: 'http://wenku.me/index.php?controller=vote&action=getAnswerListById',
                    method: 'GET',
                    data: {question_id: questionId},
                    dataType: 'json',
                    success: function (response) {
                        if (response.code == 200) {
                            let answerHtml = '';
                            response.data.forEach(function (option, index) {
                                const alphabet = String.fromCharCode(65 + index);
                                answerHtml += `<div class="answer-item">
                                                        <span class="answer-label">${alphabet}:</span>
                                                        <span>${option.option_text}</span>
                                                   </div>`;
                            });
                            answerContent.html(answerHtml);
                            answerContainer.show();
                        } else {
                            answerContent.html('<p>获取答案失败，请稍后重试。</p>');
                            answerContainer.show();
                        }
                    },
                    error: function () {
                        answerContent.html('<p>网络错误，请稍后重试。</p>');
                        answerContainer.show();
                    }
                });
            } else {
                // 如果答案区域显示，则隐藏它
                answerContainer.hide();
                answerContent.empty();
            }
        });
    });
</script>